//定义公共接口给 User/Company 使用，提高代码复用
export interface Mappable {
  //经纬度
  location: {
    lat: number;
    lng: number;
  };
  //返回信息窗口的文本内容方法
  markerContent(): string;
  color: string;
}

export class CustomMap {
  //定义类型
  //将其作为私有属性，不能给外面使用
  private BMap: BMapGL.Map;

  constructor(divId: string) {
    //实例化访问BMap底下的Map类
    //Map类接收两个参数：
    //参数1：HTMLElement挂载容器
    //参数2：配置对象
    this.BMap = new BMapGL.Map(divId);

    //设置中心点坐标
    var point = new BMapGL.Point(116.404, 39.915);

    //地图初始化，同时设置地图展示级别
    this.BMap.centerAndZoom(point, 1);
  }

  // console.log(user);
  //User {name: 'Karson', location: {lat: 26.6412, lng: -145.0176}}
  // console.log(compnay);
  //Company {name: 'Bernhard - Bashirian', catchPhrase: 'Versatile mobile projection', location: {lat: -32.224, lng: 10.1234}}

  //在地图上添加标注定位
  addMarker(mappable: Mappable) {
    //创建位置坐标：给Point方法传入符合公共接口的参数
    const point = new BMapGL.Point(
      mappable.location.lat,
      mappable.location.lng
    );

    //创建定位
    const marker = new BMapGL.Marker(point);

    //注意：this.BMap === map.BMap

    //给定位覆盖到地图上
    this.BMap.addOverlay(marker);

    //点击定位显示位置信息窗口
    marker.addEventListener('click', () => {
      var opts = {
        // 信息窗口宽度
        width: 300,
        // 信息窗口高度
        height: 100,
        // 信息窗口标题
        title: '信息窗口'
      };

      // 创建信息窗口对象
      const infoWindow = new BMapGL.InfoWindow(mappable.markerContent(), opts);
      // 打开信息窗口
      this.BMap.openInfoWindow(infoWindow, point);
    });
  }
}
